<template>
  <tree-select
    v-model="value"
    :options="option.options"
    :disabled="option.disabled"
    :placeholder="`请选择${option.label}`"
    :normalizer="normalizer"
    no-options-text="没有子节点"
    no-children-text="没有子节点"
    :size="size"
  ></tree-select>
</template>
<script>
  import TreeSelect from 'treeselect'

  const normalizer = node => ({
    id: node.id,
    label: node.name || node.label || node.title
  })

  export default {
    name: 'TreeSelect',
    components: { TreeSelect },
    model: {
      prop: 'propValue',
      event: 'onChange',
    },
    props: {
      propValue: {
        type: null,
        default: null,
      },
      option: {
        type: Object,
        default: () => ({}),
      }
    },
    data() {
      return {
        value: this.propValue,
        normalizer
      }
    },
    watch: {
      value(v) {
        this.$emit('onChange', v)
      }
    },
    methods: {
      onValueChange(value) {
        this.$emit('onChange', value)
      },
    },
  }
</script>
<style scoped>
</style>
